//初始化编辑器
var testEditor;
$(function () {
    testEditor = editormd("article-content", {
        width: "100%",
        height: "82vh",
        path: '/js/editormd/lib/',
        theme: "white",
        previewTheme: "white",
        editorTheme: "pastel-on-white",
        markdown: "",
        codeFold: true,
        saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
        searchReplace: true,
        //watch : false,                // 关闭实时预览
        htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
        //toolbar  : false,             //关闭工具栏
        //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
        emoji: true,
        taskList: true,
        tocm: true, // Using [TOCM]
        tex: true, // 开启科学公式TeX语言支持，默认关闭
        flowChart: true, // 开启流程图支持，默认关闭
        sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
        dialogLockScreen: false, // 设置弹出层对话框不锁屏，全局通用，默认为true
        dialogShowMask: false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
        dialogDraggable: false, // 设置弹出层对话框不可拖动，全局通用，默认为true
        dialogMaskOpacity: 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
        dialogMaskBgColor: "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/api/oss/upload?dir=blogs",
        onload: function () {
            var cacheContent = window.localStorage.getItem("kss_blog_content");
            if(cacheContent){
                testEditor.setMarkdown(cacheContent);
            }
        },
        onchange:function(){
            cacheBlog();
        }
    });

    // 同步缓存
    setCacheBlog()
});

function setCacheBlog(){
    var title = window.localStorage.getItem("kss_blog_title");
    if(title){
        $("#article_title").val(title);
        vm.blog.title = title;
    }

    var img = window.localStorage.getItem("kss_blog_img");
    if(img){
        $("#article-img").val(img);
        vm.blog.img = img;
    }

    var desc = window.localStorage.getItem("kss_blog_desc");
    if(desc){
        $("#article-desc").val(desc)
        vm.blog.description = desc;
    }

    var cid = window.localStorage.getItem("kss_blog_cid")
    if(cid){
        $("#category").find("option[value='"+cid+"']").prop("selected",true);
        vm.blog.categoryId = cid;
    }
}

// 输入的时候同步缓存
function cacheBlog(){
    window.localStorage.setItem("kss_blog_title",$("#article_title").val());
    window.localStorage.setItem("kss_blog_img",$("#article-img").val());
    window.localStorage.setItem("kss_blog_desc",$("#article-desc").val());
    window.localStorage.setItem("kss_blog_cid",$("#category").val());
    window.localStorage.setItem("kss_blog_content",testEditor.getMarkdown());
}

function removeBlog(){
    window.localStorage.removeItem("kss_blog_title");
    window.localStorage.removeItem("kss_blog_img");
    window.localStorage.removeItem("kss_blog_desc");
    window.localStorage.removeItem("kss_blog_cid");
    window.localStorage.removeItem("kss_blog_content");
}


const vm = Vue.createApp({
    // 数据模型
    data() {
        return {
            blog: {
                id: "",//新增的时候是null,修改时候是有具体的id
                title: "",
                categoryId: "1",
                categoryTitle: "程序人生",
                htmlcontent: "",
                content: "",
                description: ""
            },
            categoryList: [
                {id: 1, name: "Java面试", checked: false},
                {id: 2, name: "Web开发", checked: false},
                {id: 3, name: "设计系统", checked: false},
                {id: 4, name: "框架服务", checked: false},
                {id: 5, name: "微服务", checked: false},
                {id: 6, name: "移动APP", checked: false}
            ]
        }
    },


    // 生命周期
    mounted() {
        var blogId = this.$refs.blogId.value;
        // 请注意：这里一定要加判断，因为添加和修改是公用了一个页面。如果你不加判断，添加也会来执行，这是没意义的
        //  blogId是不是null，肯定执行修改操作,
        if (blogId) {
            this.blog.id = blogId;
            this.getBlog();
        }

    },

    // 事件定义
    methods: {

        // 根据id查询文章信息
        getBlog(callback) {
            axios.get("/api/blog/get/" + this.blog.id).then(res => {
                // 把后台查询的数据赋值给vue数据模型
                // 这里个时候blog是有id的
                this.blog = res.data;
                setTimeout(()=>{
                    var content =  res.data.content;
                    var cachecontent = window.localStorage.getItem("kss_blog_content") || "";
                    testEditor.setMarkdown(cachecontent.length > content.length?cachecontent:res.data.content);
                },300)
            })
        },

        // 这个方法就是专门获取分类名称
        changeCategory(ev) {
            var selectIndex = ev.target.selectedIndex;
            var options = ev.target.options;
            this.blog.categoryId = options[selectIndex].value;
            this.blog.categoryTitle = options[selectIndex].text;
            cacheBlog();
        },

        getCategoryTitle(categoryId) {
            // var obj = {};
            // // 根据数据库查询出来的分类组合对象
            // for(let i=0;i<this.categoryList.length;i++){
            //     obj[this.categoryList[i].id] =  this.categoryList[i].name;
            // }
            // // 目的是方便获取
            // return obj[categoryId];

            // 根据数据库查询出来的分类组合对象
            var title = "";
            for (let i = 0; i < this.categoryList.length; i++) {
                if (this.categoryList[i].id == categoryId) {
                    title = this.categoryList[i].name;
                    break;
                }
            }
            // 目的是方便获取
            return title;
        },

        saveBlog () {
            // 1：获取文本编辑器的内容
            this.blog.htmlcontent = testEditor.getHTML();
            this.blog.content = testEditor.getMarkdown();
            this.blog.img = this.$refs.blogimg.value;
            // 2：获取分类标题名称
            this.blog.categoryTitle = this.getCategoryTitle(this.blog.categoryId);
            // 如果出现了异常就会阻止执行了。 axios.post默认情况下，如果你以对象方式传递话，默认是放在请求体中。
            // jquery 的参数{}，内部转换成 ?id=1&tilte=

            $.post("/api/blog/saveupdate");

            // axios.post(`/api/blog/saveupdate`, this.blog).then(res=>{
            //     if(this.blog.id){
            //         alert("修改成功!!!")
            //         window.location.href = window.location.href;
            //     }else{
            //         alert("添加成功!!!")
            //         //window.location.href = "/?cid="+this.blog.categoryId;
            //         window.location.href = "/blog/edit/"+res.data.id;
            //     }
            //
            //     // 移除缓存
            //     removeBlog();
            // });

        }
    }
}).mount("#app");





